// pages/mapdetails/mapdetails.js
// 1. 本地测试时，请在编辑器中依次点击右上角【详情】→【本地设置】→【不校验合法域名、webview...】，否则会报错。
// 2. 地图显示需要配合map组件：https://developers.weixin.qq.com/miniprogram/dev/component/map.html
// 3. 腾讯地图文档：https://lbs.qq.com/service/webService/webServiceGuide/webServiceOverview

// 腾讯地图KEY
const KEY = 'TASBZ-BG5WU-KUVVY-G3O7E-IGWZH-BVBFP'

Page({

  data: {
    // 位置信息
    info: {
      ad_info: {
        adcode: 430103,
        city: "长沙市",
        district: "天心区",
        nation: "中国",
        nation_code: 156,
        province: "湖南省",
      },
      location: {
        lat: 28.11426,
        lng: 112.98983
      },
      ip: '240c:ce04:1053:3031::16:78de',
      status: 0
    },
    // 当前位置的经纬度
    latitude: 28.11426,//纬度
    longitude: 112.98983,//经度
    // 周边楼、亭(要标记的位置点数据)
    markers: [],
  },
  
  backlink:function(){
    console.log("点击返回按钮......")
    wx.navigateBack({
      delta: 1 //返回上一级页面
    })
  },

  onLoad() {
    // 获取所在地的ip
    this.getIp();
    // 获取北京市内的餐馆并标记地点
    this.getMaps();
  },

  /**
  * 获取当前定位
  * @description 简单赋值显示
  * @return void
  */
  getIp() {
    wx.request({
      method: 'GET',
      url: `https://apis.map.qq.com/ws/place/v1/search/${this.data.info.ip}`,
      // 请求参数，详见官方文档(顶部有传送门)
      data: {
        key: KEY,// 申请的key
        // 更多参数...
      },
      success: (res) => {
        console.log('定位数据', res)
        this.setData({
          // 这块JSON字符串赋值，方便显示在view视图里
          info: JSON.stringify(res.data.result),
          
          // latitude: this.info.location.lat,
          // longitude: this.info.location.lng,
        })
        // console.log("this.info:",JSON.parse(this.data.info))
        // 您的业务逻辑
        // ...
      }
    })
  },

  /**
   * 获取北京市内的餐馆并标记地点
   * @description 网络请求并设置
   * @return void
   */
  getMaps() {
    var allMarkers = []
    //通过wx.request发起HTTPS接口请求
    wx.request({
      //地图WebserviceAPI地点搜索接口请求路径及参数（具体使用方法请参考开发文档）
      url: `https://apis.map.qq.com/ws/place/v1/search?page_size=10&boundary=region(长沙,0)&keyword=禹王碑&filter=category=旅游景点&key=${KEY}`,
      success: (res) => {
        // console.log('数据', res)
        var result = res.data
        var pois = result.data
        for (var i = 0; i < pois.length; i++) {
          var title = pois[i].title
          var lat = pois[i].location.lat
          var lng = pois[i].location.lng
          // console.log(title+","+lat+","+lng)
          const marker = {
            id: i,
            latitude: lat,
            longitude: lng,
            callout: {
              // 点击marker展示title
              content: title,
              fontSize:15,
              padding:10,
              borderRadius:5,
              display:'ALWAYS'
            }
          }
          allMarkers.push(marker)
        }
        // 设置更新数据
        this.setData({
          latitude: allMarkers[0].latitude,
          longitude: allMarkers[0].longitude,
          markers: allMarkers
        })
        console.log("markers",this.data.markers)
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }

})